<template>
    <!-- 图片广告 -->
    <div class="imgAdContainer">
        <!-- 样式一(轮播海报) -->
        <van-swipe 
            :autoplay="3000" 
            indicator-color="#000" 
            :height="h"
            :class="['fillstyle' + imgAdInfo.fillstyle, 'layout' + imgAdInfo.layout]"
            v-if="imgAdInfo.layout == 1 ? true : false"
        >
            <van-swipe-item 
                v-for="item in imgAdInfo.images"
                :key="item['__image-ad-entry-uuid__']"
            >
                <img 
                    :src="item.imageUrl" 
                    alt=""
                    ref="ad"
                >
            </van-swipe-item>
        </van-swipe>
        <!-- 样式二(一行一个) -->
        <ul 
            :class="['fillstyle' + imgAdInfo.fillstyle, 'layout' + imgAdInfo.layout]"
            v-if="imgAdInfo.layout == 2 ? true : false"
        >
            <li
                :style="{margin: `${imgAdInfo.space}px 0`}"
                v-for="item in imgAdInfo.images"
                :key="item['__image-ad-entry-uuid__']"
            >
                <img 
                    :src="item.imageUrl" 
                    alt=""
                    ref="ad"
                >
            </li>
        </ul>
        <!-- 样式三(横向滑动) -->
        <div ref="box" v-if="imgAdInfo.layout == 3 || 4 || 5 ? true : false">
            <v-touch
                @swipeleft="onSwipeLeft" 
                @swiperight="onSwiperight" 
            >
                <ul 
                    :class="['fillstyle' + imgAdInfo.fillstyle, 'layout' + imgAdInfo.layout]"
                    ref="warp"
                >
                    <li
                        :style="{margin: `0 ${imgAdInfo.space}px`}"
                        v-for="(item, index) in imgAdInfo.images"
                        :key="item['__image-ad-entry-uuid__']"
                    >
                        <img 
                            :src="item.imageUrl" 
                            :style="{width: index == 0 ? w * 0.9 + 'px' : 'auto', height: index != 0 ? h + 'px' : 'auto'}"
                            alt=""
                            ref="ad"
                            v-if="imgAdInfo.layout == 3 ? true : false"
                        >
                        <img 
                            :src="item.imageUrl" 
                            :style="{width: index == 0 ? w * 0.4 + 'px' : 'auto', height: index != 0 ? h + 'px' : 'auto'}"
                            alt=""
                            ref="ad"
                            v-if="imgAdInfo.layout == 4 ? true : false"
                        >
                        <img 
                            :src="item.imageUrl" 
                            :style="{width: index == 0 ? w * 0.2 + 'px' : 'auto', height: index != 0 ? h + 'px' : 'auto'}"
                            alt=""
                            ref="ad"
                            v-if="imgAdInfo.layout == 5 ? true : false"
                        >
                    </li>
                </ul>
            </v-touch>
        </div>
    </div>
</template>

<script>
// 引入 滑动方法
import WebUtils from 'Utils/webUtils'

export default {
    props: ['imgAdInfo'],
    data() {
        return {
            w: 0,   // 当前屏幕宽度
            h: 0,   // 图片高度
            translateX: 0,   // ul初始x轴位移
        }
    },
    methods: {
        // 向左滑动
        onSwipeLeft() {            
            WebUtils.touchSlideLeft(this, 0, 100, 'box')
        },
        // 向右滑动
        onSwiperight() {
            WebUtils.touchSlideRight(this, 100)
        }
    },
    created() {
        this.w = document.body.clientWidth
    },
    mounted() {
        setTimeout(() => {
            if (this.$refs.ad) {
                const h = this.$refs.ad[0].clientHeight
                this.h = h
            }
        }, 2000)
    }
}
</script>

<style lang="stylus">
    // 图片广告
    .imgAdContainer
        // 样式一
        .layout1
            .van-swipe__track
                display: flex;
                align-items: center;
                img
                    width 100%
                    height 100%
            // 留白
            .fillstyle2
                .van-swipe-item
                    position relative
                img
                    position absolute
                    top 50%
                    transform translateY(-50%)
                    height auto 
            .van-swipe__indicator
                width 0.20rem
                height 0.20rem
                background #000
        // 样式二
        .layout2
            img 
                width 100%
        // 样式三
        .layout3,
        .layout4,
        .layout5
            display flex
            transition all 0.5s
            li
                flex none 
                img
                    width 100%
</style>
